<%--
  Created by IntelliJ IDEA.
  User: leonzhangxf
  Date: 2020/9/19
  Time: 2:59 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>resume</title>

    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
    <el-button @click="logout">Logout</el-button>

    <el-button @click="showCreateDialog">Create</el-button>

    <el-table
            :data="list"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="Name"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="Address">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="Phone">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="Operation"
                width="200">
            <template slot-scope="scope">
                <el-button @click="showUpdateDialog(scope.row)" type="text" size="small">Update</el-button>
                <el-button @click="showDeleteDialog(scope.row)" type="text" size="small">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div id="create-dialog">
        <el-drawer
                title="Create"
                :visible.sync="createDialogVisible"
                direction="rtl"
                @close="closeCreateDialog">
            <el-form ref="create-form" :model="create" label-width="80px">
                <el-form-item label="Name">
                    <el-input v-model="create.name"></el-input>
                </el-form-item>
                <el-form-item label="Address">
                    <el-input v-model="create.address"></el-input>
                </el-form-item>
                <el-form-item label="Phone">
                    <el-input v-model="create.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="createResume">CreateResume</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>

    <div id="update-dialog">
        <el-drawer
                title="Update"
                :visible.sync="updateDialogVisible"
                direction="rtl"
                @close="closeUpdateDialog">
            <el-form ref="update-form" :model="update" label-width="80px">
                <el-form-item label="ID">
                    <el-input type="hidden" v-model="update.id"></el-input>
                </el-form-item>
                <el-form-item label="Name">
                    <el-input v-model="update.name"></el-input>
                </el-form-item>
                <el-form-item label="Address">
                    <el-input v-model="update.address"></el-input>
                </el-form-item>
                <el-form-item label="Phone">
                    <el-input v-model="update.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateResume">UpdateResume</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>

    <div id="delete-dialog">
        <el-drawer
                title="Delete"
                :visible.sync="deleteDialogVisible"
                direction="rtl"
                @close="closeDeleteDialog">
            <el-form ref="delete-form" :model="deleteModel" label-width="80px">
                <el-form-item label="ID">
                    <el-input disabled v-model="deleteModel.id"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="deleteResume">DeleteResume</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</div>


<script type="text/javascript">
  new Vue({
    el: "#app",
    data() {
      return {
        list: [],
        createDialogVisible: false,
        updateDialogVisible: false,
        deleteDialogVisible: false,
        create: {
          name: null,
          address: null,
          phone: null
        },
        update: {
          id: null,
          name: null,
          address: null,
          phone: null
        },
        deleteModel: {
          id: null
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      logout() {
        window.location.href = '/login/logout'
      },
      getList() {
        $.ajax({
          url: '/resume/list',
          type: 'get',
          dataType: 'json',
          success: (res) => {
            if (res.code === 1) {
              console.log(this)
              this.list = res.data
            } else if (res.code === 401) {
              window.location.href = '/login/login-page'
            }
          }
        })
      },
      showCreateDialog() {
        console.log("show create dialog")
        this.createDialogVisible = true
      },
      closeCreateDialog() {
        this.create = {
          name: null,
          address: null,
          phone: null
        }
        this.createDialogVisible = false
      },
      createResume() {
        $.ajax({
          url: '/resume',
          type: 'post',
          dataType: 'json',
          contentType: 'application/json',
          data: JSON.stringify(this.create),
          success: (res) => {
            if (res.code === 1) {
              console.log(res)
              this.closeCreateDialog()
              this.getList()
            } else if (res.code === 401) {
              window.location.href = '/login/login-page'
            } else {
              alert(res.message)
            }
          }
        })
      },
      showUpdateDialog(row) {
        this.update = {
          id: row.id,
          name: row.name,
          address: row.address,
          phone: row.phone
        }
        this.updateDialogVisible = true
      },
      closeUpdateDialog() {
        this.update = {
          id: null,
          name: null,
          address: null,
          phone: null
        }
        this.updateDialogVisible = false
      },
      updateResume() {
        $.ajax({
          url: '/resume/' + this.update.id,
          type: 'put',
          dataType: 'json',
          contentType: 'application/json',
          data: JSON.stringify(this.update),
          success: (res) => {
            if (res.code === 1) {
              console.log(res)
              this.closeUpdateDialog()
              this.getList()
            } else if (res.code === 401) {
              window.location.href = '/login/login-page'
            } else {
              alert(res.message)
            }
          }
        })
      },
      showDeleteDialog(row) {
        this.deleteModel.id = row.id
        this.deleteDialogVisible = true
      },
      closeDeleteDialog() {
        this.deleteModel.id = null
        this.deleteDialogVisible = false
      },
      deleteResume() {
        $.ajax({
          url: '/resume/' + this.deleteModel.id,
          type: 'delete',
          dataType: 'json',
          contentType: 'application/json',
          success: (res) => {
            if (res.code === 1) {
              console.log(res)
              this.closeDeleteDialog()
              this.getList()
            } else if (res.code === 401) {
              window.location.href = '/login/login-page'
            } else {
              alert(res.message)
            }
          }
        })
      },
    }
  })
</script>
</body>
</html>
